.main-body {
    position: relative;
}

.note-box {
    display: flex;
    justify-content: center;
    height: 500px;
}

/* 滑动卡片样式--------------------------------------------------------------------------------- */
.spread-card {
    margin: 10px 20px;
    width: 280px;
    height: 480px;
    display: flex;
    position: relative;
    transition: 0.5s ease-in-out;
    border-radius: 10px;
}

.card-main {
    position: absolute;
    background-image: linear-gradient(-225deg, #7DE2FC 0%, #B9B6E5 100%);
    border: solid 3px rgb(165, 197, 237);
    width: 280px;
    height: 475px;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-evenly;
    border-radius: 10px;
}

.card-main img {
    margin: 10px;
    width: 100px;
    height: 100px;
}

.card-side span {
    background-color: rgb(165, 197, 237);
    margin: 3px;
    border-radius: 5px;
    font-size: 12x;
    padding: 1px 3px;
}

.card-side {
    position: absolute;
    border: solid 3px rgb(165, 197, 237);
    width: 280px;
    height: 465px;
    left: 0;
    top: 0;
    z-index: 0;
    opacity: 0;
    scale: 0.8;
    transition: 0.5s ease-in-out;
    border-radius: 10px;
    margin-left: 10px;
    padding: 10px 0 0 10px;
}

.spread-card:hover .card-side {
    opacity: 1;
    left: 280px;
    scale: 1.0;
    transition: 0.5s ease-in-out;
}

.spread-card:hover {
    width: 560px;
    transition: 0.5s ease-in-out;
}